<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div{
            background-color: white;
            width: 100%;
            height: 15px;
            position: absolute;
            margin-top: -78px;
        }
    </style>
</head>
<body>
<div id="main" style="width: 90% ;height:600px;margin-left: 20px;"></div>
<div class="div"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.0/echarts.common.js"></script>
<script>
    let main = echarts.init(document.getElementById('main'));
    let digg_count = [100, 999, 666, 888, 123];//点赞数
    let share_count = [150, 919, 566, 878, 1223];//分享数
    let comment_count = [10, 99, 66, 88, 623];//评论数
    let riqi = ['2021-05-01', '2021-05-02', '2021-05-03', '2021-05-04', '2021-05-05'];//横坐标日期时间
    var img = ["https://img95.699pic.com/photo/40250/3909.jpg_wh300.jpg",
        "https://img95.699pic.com/photo/40250/3909.jpg_wh300.jpg",
        "https://img95.699pic.com/photo/40250/3909.jpg_wh300.jpg",
        "https://img95.699pic.com/photo/40250/3909.jpg_wh300.jpg",
        "https://img95.699pic.com/photo/40250/3909.jpg_wh300.jpg",];//横坐标要添加的图片
        let imageTags = Array.from({ length: img.length }, (_, index) => `img${index + 1}`);

    let option = {
        title: {
            text: '{a|} 最近5个作品表现',
            show: true,
            textStyle: {
                lineHeight: 20,
                rich: {
                    a: {
                        color: '#FFF',
                        fontSize: '20',
                        height: 20,
                        width: 20,
                        backgroundColor: {
                            image: (img[0])//自定义标题图片
                        }
                    },
                }
            }
        },
        tooltip: {
            trigger: 'axis',
        },
        legend: {
            data: ['评论数', '分享数', '点赞数']
        },
        grid: {
            containLabel: true
        },
        xAxis: [
            {//显示日期的横坐标
                triggerEvent: false,
                type: 'category',
                data: riqi,
                axisPointer: {
                    type: 'shadow'
                },
                min: 0,

            },
            {//显示图片的横坐标
                type: 'category',
                position: 'bottom',
                min: 0,
                offset: 25,
                axisPointer: {
                    type: 'none'
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                triggerEvent: true,//添加点击事件
                inverse: true,
                data: imageTags.reverse(),
                axisLabel: {
                    formatter: function (value, index) {
                        return `{${value}| }\n{value|' + value + '}`
                            .replace('{value}', '{')
                            .replace(/value\|'/, `' + imgLinks[${index}] + '|`);
                    },
                    // ...其他配置
                }
                // data: ['img1', 'img2', 'img3', 'img4', 'img5'].reverse(),
                // axisLabel: {
                //     formatter: function (value) {
                //         return '{' + value + '| }\n{value|' + value + '}';
                //     },
                //     margin: 20,
                //     rich: {
                //         value: {
                //             lineHeight: 50,
                //             align: 'center'
                //         },
                //         img1: {
                //             height: 100,
                //             width: 80,
                //             align: 'center',
                //             backgroundColor: {
                //                 image: img[0]
                //             }
                //         },
                //         img2: {
                //             height: 100,
                //             width: 80,
                //             align: 'center',
                //             backgroundColor: {
                //                 image: img[1]
                //             }
                //         },
                //         img3: {
                //             height: 100,
                //             width: 80,
                //             align: 'center',
                //             backgroundColor: {
                //                 image: img[2]
                //             }
                //         },
                //         img4: {
                //             height: 100,
                //             width: 80,
                //             align: 'center',
                //             backgroundColor: {
                //                 image: img[3]
                //             }
                //         },
                //         img5: {
                //             height: 100,
                //             width: 80,
                //             align: 'center',
                //             backgroundColor: {
                //                 image: img[4]
                //             }
                //         }
                //     }
                // }
            },
        ],
        yAxis: [
            {
                type: 'value',
                name: '点赞数',
                min: 0
            },
            {
                type: 'value',
                name: '评论数-分享数',
                min: 0
            }
        ],
        series: [
            {
                name: '评论数',
                data: comment_count,
                type: 'line',
                yAxisIndex: 1,
                smooth: true,//平滑线设置
                itemStyle: {
                    normal: {
                        lineStyle: {
                            color: '#0b73e3', //改变折线颜色
                        }
                    }
                },
            },
            {
                name: '分享数',
                data: share_count,
                type: 'line',
                smooth: true,//平滑线设置
                yAxisIndex: 1,
                itemStyle: {
                    normal: {
                        lineStyle: {
                            color: '#4af388' //改变折线颜色
                        }
                    }
                },
            },
            {
                name: '点赞数',
                type: 'bar',
                barWidth: 40,
                yAxisIndex: 0,
                itemStyle: {
                    normal: {
                        color: '#13c4db' //改变折线颜色
                    }
                },
                data: digg_count
            },
        ]
    };
    main.clear();//清空
    main.setOption(option);
    /*图片点击事件*/
    main.on('click', function (params) {
        //window.open(mapUrl[params.name]);
        alert(params.value);
    })
    window.addEventListener("resize", () => {//自适应浏览器大小（注：容器宽度应设置%）
        main.resize();
    });
</script>
</body>
</html>
